<!DOCTYPE HTML>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta th:include="front/fragments :: head(~{::title})"/>
    <title>FantasyBlog</title>
    <style>
        .carousel-control {
            width: 45px;
            height: 45px;
            line-height: 55px;
            border-radius: 45px;
            background: transparent;
            cursor: pointer;
            z-index: 100;
        }

        #prev-cover {
            position: absolute;
            top: 48%;
            left: 8px;
        }

        #next-cover {
            position: absolute;
            top: 48%;
            right: 8px;;
        }

        #prev-cover i {
            margin-right: 3px;
        }

        #next-cover i {
            margin-left: 3px;
        }

        .carousel-control:hover {
            background-color: rgba(0, 0, 0, .4);
        }

        .carousel-control i {
            color: #fff;
            font-size: 2.4rem;
        }
    </style>
    <!--打字机效果-->
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
    <script>
        $(function () {
            var typed = new Typed("#subtitle", {
                strings: ['能够通过人传授的智慧来躲避的困难实在少之又少。真正要掌握的，并不是有关某个问题的知识，而是寻找那个问题的方法。那样的东西可不是一朝一夕能掌握过来的。'],
                startDelay: 300,
                typeSpeed: 100,
                loop: true,
                backSpeed: 50,
                showCursor: true
            });
        });
    </script>
</head>

<body>
<!--navbar-->
<header th:replace="front/fragments :: header"></header>
<!--end navbar-->

<div id="app">
    <!--carousel-->
    <div class="carousel carousel-slider center index-cover" data-indicators="true" style="margin-top: -64px;"
         id="carousel">
        <div class="left waves-effect carousel-control" id="prev-cover">
            <i class="icon fa fa-angle-left"></i>
        </div>
        <div class="right waves-effect carousel-control" id="next-cover">
            <i class="icon fa fa-angle-right"></i>
        </div>
        <!--carousel-item-first-->
        <div class="carousel-item white-text bg-cover about-cover">
            <div class="container">
                <div class="row">
                    <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                        <div class="brand">
                            <!--标题-->
                            <div class="title center-align" >FantasyBlog</div>
                            <!--副标题-->
                            <div class="description center-align">
                                <span id="subtitle"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cover-btns">
                    <a class="waves-effect waves-light btn" onclick="$(window).scrollTo('#indexCard', 1000)">
                        <i class="fa fa-angle-double-down"></i>开始阅读
                    </a>
                </div>
                <div class="cover-social-link">
                    <a class="tooltipped" data-delay="50" data-position="top" data-tooltip="访问我的GitHub"
                       href="https://github.com/geek-cy"
                       target="_blank">
                        <i class="fab fa-github"></i>
                    </a>
                    <a class="tooltipped" data-delay="50" data-position="top" data-tooltip="邮件联系我"
                       href="mailto:geek_cy@qq.com" target="_blank">
                        <i class="fas fa-envelope-open"></i>
                    </a>
                </div>
            </div>
        </div>
        <!--end carousel-item-first-->
        <div v-for="(article, index) in topArticles" :key="article.id">
            <div class="carousel-item  white-text carousel-post bg-cover lazy"
                 :style="{backgroundImage: 'url(https://cdn.jsdelivr.net/gh/geek-cy/img/blog/background1.jpg)' }"
                 :data-bg="article.cover">
                <div class="container">
                    <div class="row">
                        <div class="col s10 offset-s1">
                            <div class="title center-align">{{article.title}}</div>
                            <div class="description center-align">{{article.summary}}</div>
                            <div class="cover-btns">
                                <a class="waves-effect waves-light btn" :href="'/article/'+article.id" target="_blank">
                                    <i class="icon fa fa-eye fa-fw"></i>阅读更多
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--end carousel-->

    <!--content-->
    <main class="content">
        <div class="index-card" id="indexCard">
            <div class="container">
                <div class="card">
                    <div class="card-content" data-aos="fade-up">
                        <!--名言-->
                        <div class="dream">
                            <div class="title center-align">
                                <i class="far fa-lightbulb"></i>&nbsp;&nbsp;C.A.R. Hoare
                            </div>

                            <div class="row">
                                <div class="col l8 offset-l2 m10 offset-m1 s10 offset-s1 center-align text">
                                    我们有两个方法来进行软件设计：一个是让其足够的简单以至于让BUG无法藏身；另一个就是让其足够的复杂，让人找不到BUG。前者更难一些<br>
                                    There are two ways of constructing a software design: One way is to make it so
                                    simple that there are obviously no deficiencies,
                                    and the other way is to make it so complicated that there are no obvious
                                    deficiencies. The first method is far more difficult.
                                </div>
                            </div>
                        </div>
                        <!--推荐文章-->
                        <div class="recommend" id="recommend-sections" data-aos="fade-up">
                            <div class="title"><i class="far fa-thumbs-up"></i>&nbsp;&nbsp;推荐文章</div>
                            <div class="row">
                                <div v-for="(article, index) in recommendArticles" :key="article.id">
                                    <div class="col s12 m6" data-aos="zoom-in-up">
                                        <div class="post-card lazy"
                                             :style="{backgroundImage: 'url(https://cdn.jsdelivr.net/gh/geek-cy/img/blog/miku.jpg)' }"
                                             :data-bg="article.cover">
                                            <div class="post-body">
                                                <!--分类-->
                                                <div class="post-categories">
                                                    <a class="category"
                                                       :href="'/page/categories?id='+article.category.id">{{article.category.name}}</a>
                                                </div>
                                                <!--标题-->
                                                <a :href="'/article/'+article.id">
                                                    <h3 class="post-title">{{article.title}}</h3>
                                                </a>
                                                <!--描述-->
                                                <p class="post-description">{{article.summary}}</p>
                                                <!--阅读更多-->
                                                <a class="read-more btn waves-effect waves-light"
                                                   :href="'/article/'+article.id"
                                                   style="background: linear-gradient(to right, #FF5E3A 0%, #FF2A68 100%)"
                                                   target="_blank">
                                                    <i class="icon far fa-eye fa-fw"></i>阅读更多
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 所有文章卡片 -->
        <article class="container articles" v-show="articles.length !== 0" id="articleCards">
            <div class="row article-row">
                <div v-for="(article, index) in articles" :key="article.id">
                    <div class="article col s12 m6 l4" data-aos="zoom-in">
                        <div class="card articleCard">
                            <!--卡片上部-->
                            <a :href="'/article/'+article.id" target="_blank">
                                <div class="card-image">
                                    <!--文章图片 -->
                                    <img class="responsive-img lazy" src="https://cdn.jsdelivr.net/gh/geek-cy/img/blog/miku.jpg"
                                         :data-src="article.cover">
                                    <!--文章标题-->
                                    <span class="card-title">{{article.title}}</span>
                                </div>
                            </a>
                            <!--卡片下部-->
                            <div class="card-content article-content">
                                <!--文章描述-->
                                <div class="summary block-with-text">{{article.summary}}</div>
                                <!--文章信息-->
                                <div class="publish-info">
                                    <!--发布日期-->
                                    <span class="publish-date">
                                        <i class="far fa-clock fa-fw icon-date"></i>{{article.createTime | dateFormat}}
                                    </span>
                                    <!--文章分类-->
                                    <span class="publish-author">
                                        <i class="fas fa-bookmark fa-fw icon-category"></i>
                                        <a class="post-category" :href="'/page/categories?id='+article.category.id">{{article.category.name}}</a>
                                    </span>
                                </div>
                            </div>
                            <!--文章标签-->
                            <div class="card-action article-tags">
                                <a :href="'/page/tags?id='+tag.id" v-for="(tag, index) in article.tagList">
                                    <span class="chip bg-color">{{tag.name}}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </main>
    <!--end content-->

    <!--pagination-->
    <div class="container paging">
        <div class="row">
            <!--左边按钮-->
            <div class="col s4 m4 l4">
                <a class="left btn-floating btn-large waves-effect waves-light" @click="toPage(current-1)"
                   href="#articleCards"
                   :class="{disabled: current == 1}">
                    <i class="fas fa-angle-left"></i>
                </a>
            </div>
            <!--分页信息-->
            <div class="page-info col s4 m4 l4">
                <div class="center-align b-text-gray">{{current}} / {{pages}}</div>
            </div>
            <!--右边按钮-->
            <div class="col s4 m4 l4">
                <a class="right btn-floating btn-large waves-effect waves-light" @click="toPage(current+1)"
                   href="#articleCards" :class="{disabled: current == pages}">
                    <i class="fas fa-angle-right"></i>
                </a>
            </div>
        </div>
    </div>
    <!--end pagination-->
</div>

<!--footer-->
<footer th:replace="front/fragments :: footer"></footer>
<!--end footer-->

<!--commons-->
<div th:replace="front/fragments :: commons"></div>
<!--end commons-->

<!--vue-->
<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        data: {
            topArticles: [],
            recommendArticles: [],
            articles: [],
            current: 1,
            pages: 1,
        },
        methods: {
            getHomeArticles: function () {
                axios({
                    url: '/home',
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                }).then((result) => {
                    let homeArticles = result.data;
                    this.topArticles = homeArticles.topArticles;
                    this.recommendArticles = homeArticles.recommendArticles;
                    let pageInfo = homeArticles.pageInfo;
                    this.articles = pageInfo.records;
                    this.current = pageInfo.current;
                    this.pages = pageInfo.pages;
                    this.$nextTick(function () {
                        this.initCarousel();
                        lazyLoadInstance.update();
                    });
                })
            },
            getArticles: function (current) {
                axios({
                    url: '/articles?current=' + current,
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                }).then((result) => {
                    this.articles = result.data.records;
                    this.current = result.data.current;
                    this.pages = result.data.pages;
                    this.$nextTick(function () {
                        lazyLoadInstance.update();
                    });
                })
            },
            toPage: function (page) {
                if (page >= 1 && page <= this.pages) {
                    this.current = page;
                    this.getArticles(page);
                    $(window).scrollTo('#articleCards', 1000);
                }
            },
            initCarousel: function () {
                // TODO 此处的轮播尚需优化，PC/Mobile 在触摸切换时都感觉相当不灵活
                $(function () {
                    let coverSlider = $('.carousel');
                    //用户触摸轮播自动 restartPlay 是否生效
                    let initUserPressedOrDraggedActive = false

                    //用户触摸轮播自动 restartPlay
                    function initUserPressedOrDragged(instance) {
                        setInterval(() => {
                            if (instance.pressed || instance.dragged) {
                                // console.log('initUserPressedOrDragged: ',instance.pressed,instance.dragged)
                                restartPlay()
                            }
                        }, 1000)
                    }

                    coverSlider.carousel({
                        duration: Number('120'),
                        fullWidth: true,
                        indicators: 'true' === 'true',
                        onCycleTo() {
                            if (!initUserPressedOrDraggedActive) {
                                // console.log('initUserPressedOrDraggedActive')
                                initUserPressedOrDragged(this)
                                initUserPressedOrDraggedActive = true
                            }
                        },
                    })

                    let carouselIntervalId;

                    // Loop to call the next cover article picture.
                    let autoCarousel = function () {
                        carouselIntervalId = setInterval(function () {
                            coverSlider.carousel('next');
                        }, 20000);
                    };
                    autoCarousel();


                    function restartPlay() {
                        clearInterval(carouselIntervalId);
                        autoCarousel();
                    };

                    // prev and next cover post.
                    $('#prev-cover').click(function () {
                        coverSlider.carousel('prev');
                        restartPlay();
                    });
                    $('#next-cover').click(function () {
                        coverSlider.carousel('next');
                        restartPlay();
                    });
                });
            },
            /*swal: function () {
                swal({
                    title: "欢迎来到FantasyBlog",
                    text: "Welcome to FantasyBlog",
                    // type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    closeOnConfirm: false,
                    closeOnCancel: false
                })
            }*/
        },
        created() {
            this.getHomeArticles();
            // this.swal();
        },
        filters: {
            dateFormat: function (value) {
                return moment(value).format("YYYY-MM-DD");
            }
        },
    });
</script>
<!--弹出层-->
<div th:replace="front/fragments :: scripts">
</div>
</body>
</html>
